import React, { Component } from 'react'
import './login.scss'
import { getApiLogin , getApiUserInfo , getApiresetpwd , getApiSend } from "../../axios/api"
import { message } from 'antd'
import { set , get, remove } from '../../axios/localstorage'
import Header from '../../components/Header/header'

export default class login extends Component {

    state = {
        account:'',
        password:'',
        newpassword:'',
        confirmpassword:'',
        code:'',
        isforget:false,
        showMsg:false,
        showMsg2:false,
        msg:'',
        msg2:'',
        forget_alert:false,
        alert:false,
        isSend:false,
        countDownNum:60,

        phone:'',
    }

    componentWillMount(){
        window.scroll(0,0)

        let data = get('psw');
        
        if(data){
            
            this.setState({
                password:data.password,
                account:data.account,
                isforget:true
            })
        }
    
    }

    countDown=() =>{ 
        let countDownNum = this.state.countDownNum-1;//获取倒计时初始值
        //如果将定时器设置在外面，那么用户就看不到countDownNum的数值动态变化，所以要把定时器存进data里面
        this.timer = setInterval(() => {


            if(countDownNum<=0){
                clearInterval(this.timer);
                this.setState({ countDownNum:60,  isSend: false })
            }else{
                this.setState({
                    countDownNum:(countDownNum--)
                })
            }
        }, 1000);
    }

    gotoSend=()=>{

        if(!this.state.phone){
            this.setState({
                msg2:'请先输入手机号！',
                showMsg2:true
            })
            return false;
        }

        var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;

        if (!myreg.test(this.state.phone)) {
            this.setState({
                msg2:'请输入准确的手机号码！',
                showMsg2:true
            })
            return false;
        }

        let event = "resetpwd";


        let param = {
            mobile:this.state.phone,
            event
        }

        getApiSend(param)
        .then( req =>{
            console.log(req.data)
            if(req.data.code === 1){
                this.setState({
                    isSend:true
                })
                this.countDown();
            }else{
                this.setState({
                    msg2:req.data.msg,
                    showMsg2:true
                })
            }
        }).catch( err =>{
            console.error(err);
        })


        
        
    }

    gotoHome=()=>{


        if(!this.state.account){
            this.setState({
                msg:'请先输入账号！',
                showMsg:true
            })
            return false;
        }

        if(!this.state.password){
            message.info('请先输入密码！');
            this.setState({
                msg:'请先输入账号！',
                showMsg:true
            })
            return false;
        }

        let param = {
            account:this.state.account,
            password:this.state.password,
        }

        getApiLogin(param)
        .then( req =>{
            console.log(req.data)
            if(req.data.code === 1){
                let data = req.data.data.userinfo;
                set("token",data.token);
                
                if(this.state.isforget){
                    set('psw',param);
                }else{
                    remove('psw');
                }

                

                getApiUserInfo({token:data.token})
                .then( reg =>{
                    if(reg.data.code === 1){
                        set("userinfo",reg.data.data);
                    }
                }).catch(err =>{
                    console.log(err);
                })

                

                this.props.history.push('/home');
            }else{
                // message.info(req.data.msg);
                this.setState({
                    showMsg:true,
                    msg:req.data.msg
                })
            }
        }).catch( err =>{
            console.error(err)
        })
    }

    gotoUser=()=>{
        this.props.history.push('/user');
    }

    gotoPage=(page)=>{
        this.props.history.push(page);
    }

    gotoChangePsw=()=>{


        if(!this.state.phone){
            this.setState({
                msg2:'请先输入手机号！',
                showMsg2:true
            })
            return false;
        }

        var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;

        if (!myreg.test(this.state.phone)) {
            
            this.setState({
                msg2:'请输入准确的手机号码！',
                showMsg2:true
            })
            return false;
        }

        

        if(!this.state.newpassword){
            this.setState({
                msg2:'请先输入新密码！',
                showMsg2:true
            })
            return false;
        }

        if(!this.state.confirmpassword){
            this.setState({
                msg2:'请确认新密码！',
                showMsg2:true
            })
            return false;
        }

        if(!this.state.code){
            this.setState({
                msg2:'请先输入验证码！',
                showMsg2:true
            })
            return false;
        }

        if(this.state.newpassword !== this.state.confirmpassword){
            this.setState({
                msg2:'两次密码输入不一致！',
                showMsg2:true
            })
            return false;
        }



        let param = {
            type:"mobile",
            mobile:this.state.phone,
            captcha:this.state.code,
            newpassword:this.state.newpassword,
        }

        getApiresetpwd(param)
        .then( req =>{
            console.log(req.data)
            if(req.data.code === 1){
                message.success("密码修改成功！")
                this.setState({
                    forget_alert:false
                })
            }else{
                this.setState({
                    showMsg2:true,
                    msg2:req.data.msg,
                })
            }
        }).catch( err =>{
            console.error(err);
        })

    }

    render() {
        return (
            <div className='login'  style={{backgroundImage:"url('assets/imgs/beijingyuansu.png')"}}>

                <Header showTop={1} isUser={1} />
                
                <div className='lcen'>
                    <div className="hbox">

                        <div className="hcen">
                            <img alt="" src="assets/imgs/avatar.png" />
                        </div>
                        
                        <div className="item">
                            <input type="text" placeholder="账号" value={this.state.account} onChange={(ev)=>{this.setState({account:ev.target.value})}} />
                        </div>
                        <div className="item">
                            <input type="password" placeholder="密码" value={this.state.password} onChange={(ev)=>{this.setState({password:ev.target.value})}} />
                        </div>
                        <div className="rem">
                            <div className={this.state.isforget?"div dchosen":"div"} onClick={()=>{this.setState({isforget:!this.state.isforget})}}>
                                <img alt="" hidden={!this.state.isforget} src="assets/imgs/xuanzegou.png" />
                            </div>
                            <p>记住密码</p>
                            <h2 onClick={()=>{this.setState({forget_alert:true})}}>忘记密码？</h2>
                        </div>
                        <div className="lmsg">
                            <p hidden={!this.state.showMsg}>{this.state.msg}</p>
                        </div>
                        <button onClick={()=>{this.gotoHome()}}>登录</button>
                        <div onClick={()=>{this.gotoPage('/register')}} className="toregister">去免费注册</div>
                    </div>
                </div>

                <div className="alert" hidden={!this.state.alert}>
                    <div className="abox">
                        <div className="acen">
                            <img alt="" src="assets/imgs/chenggong.png" />
                        </div>
                        <h2>密码修改成功！</h2>
                        <p>请您用新的密码重新登录系统，感谢您的理解！</p>
                        <div className="acen">
                            <button onClick={()=>{this.setState({alert:false})}}>好的，去登录</button>
                        </div>
                    </div>
                </div>

                <div className="alert" hidden={!this.state.forget_alert}>
                    <div className="forget_alert">
                        <img className="close" onClick={()=>{this.setState({forget_alert:false})}} alt="" src="assets/imgs/tankuangcha.png" />
                        <h2>修改密码</h2>
                        <div className="aitem">
                            <p>请输入手机号</p>
                            <input type="text" placeholder="请输入手机号" value={this.state.phone} onChange={(ev)=>{this.setState({phone:ev.target.value})}} />
                        </div>
                        <div className="aitem">
                            <p>请输入新密码</p>
                            <input type="password" placeholder="请输入新密码" value={this.state.newpassword} onChange={(ev)=>{this.setState({newpassword:ev.target.value})}} />
                        </div>
                        
                        <div className="aitem">
                            <p>确认密码</p>
                            <input type="password" placeholder="确认密码" value={this.state.confirmpassword} onChange={(ev)=>{this.setState({confirmpassword:ev.target.value})}} />
                        </div>
                        <div className="aitem">
                            <p>请输入验证码</p>
                            <div className="aipt">
                                <input className="a2" type="text" placeholder="请输入验证码" value={this.state.code} onChange={(ev)=>{this.setState({code:ev.target.value})}} />
                                <h4 onClick={()=>{this.gotoSend()}}>{this.state.isSend?this.state.countDownNum+"s 后重发":"获取验证码"}</h4>
                            </div>
                        </div>
                        <div className="amsg">
                            <p hidden={!this.state.showMsg2}>{this.state.msg2}</p>
                        </div>
                        <button onClick={()=>{this.gotoChangePsw()}}>更新密码</button>
                    </div> 
                </div>

            </div>
        )
    }
}
